<template>
    <div>
        <el-container>
            <el-header></el-header>
            <el-main>
                <el-table :data="tableData" style="width: 100%">

                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别">
                    </el-table-column>
                    <el-table-column prop="age" label="年龄">
                    </el-table-column>
                    <el-table-column prop="address" label="住址">
                    </el-table-column>
                    <el-table-column prop="post" label="面试岗位">
                    </el-table-column>
                    <el-table-column prop="time" label="面试时间">
                    </el-table-column>
                    <el-table-column prop="description" label="描述">
                    </el-table-column>
                    <el-table-column prop="suggestsalary" label="建议薪资">
                    </el-table-column>

                    <el-table-column prop="state" label="审批状态">
                        <template slot-scope="scope">
                            <el-tag :type="getTagType(scope.row.state)">
                                <span>{{ getStateText(scope.row.state) }}</span>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.state == '2'"  type="success" size="small" :disabled="true"
                                @click="handleEdit(scope.row)" >
                                审批通过
                            </el-button>
                            <el-button v-if="scope.row.state == '3'"  type="danger" size="small" :disabled="true"
                                @click="handleEdit(scope.row)" >
                                审批不通过
                            </el-button>
                            <el-button v-if="scope.row.state == '1'"  type="warning" size="small"
                                @click="handleEdit(scope.row)" >
                                待审批
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>

            <el-footer style="text-align: center;margin-top: 20px;">
                <!-- 分页 -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </el-footer>
        </el-container>


        <!-- 弹出框 -->
        <el-dialog title="审批详情" :visible.sync="dialogVisible" width="40%">
            <el-form :model="form" >
                <el-col :span="11">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name"
                                :disabled="form.state != '0' ? true : false" autocomplete="off"
                                style="width:200px" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="性别">
                            <el-select v-model="form.sex" style="width:200px"
                                :disabled="form.state != '0' ? true : false">
                                <el-option label="男" value="男" />
                                <el-option label="女" value="女" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="年龄" prop="age">
                            <el-input-number v-model="form.age" style="width:200px"
                                :disabled="form.state != '0' ? true : false" controls-position="right"
                                @change="handleChange" :min="1" :max="120"></el-input-number>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="住址" prop="address">
                            <el-input v-model="form.address" style="width:200px"
                                :disabled="form.state != '0' ? true : false" autocomplete="off"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="面试岗位" prop="post">
                            <el-input v-model="form.post" style="width:200px"
                                :disabled="form.state != '0' ? true : false" autocomplete="off"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="面试日期" prop="time">
                            <el-date-picker v-model="form.time" type="datetime" style="width:200px"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :disabled="form.state != '0' ? true : false"
                                placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="22">
                        <el-form-item label="描述" prop="description">
                            <el-input v-model="form.description" style="width:500px" type="textarea"
                                :disabled="form.state != '0' ? true : false"
                                autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="22">
                        <el-form-item label="建议薪资" prop="suggestsalary">
                            <el-input-number v-model="form.suggestsalary" style="width:200px"
                                :disabled="form.state != '0' ? true : false" controls-position="right"
                                @change="handleChange" :min="1" :max="99999999"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="领导意见">
                            <el-input v-model="form.opinion" style="width:500px" type="textarea"
                                ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="22">
                        <el-form-item label="薪资">
                            <el-input-number v-model="form.salary"
                               controls-position="right"
                                @change="handleChange" :max="99999999"></el-input-number>
                        </el-form-item>
                    </el-col>
            </el-form>
            <span slot="footer" class="dialog-footer">

                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="agree">通过</el-button>
                <el-button type="primary" @click="noagree">不通过</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getEmployeeStateList, agree, noagree } from '@/api/employee'
export default {
    name: 'LeaderIndex',
    data() {
        return {
            form: {},
            dialogVisible: false,
            tableData: [],
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
        }
    },
    methods: {
        handleEdit(row) {
            this.dialogVisible = true
            this.form = row
        },
        agree() {
            const params = {
                id: this.form.id,
                opinion: this.form.opinion,
                salary: this.form.salary,
                state: 2
            }
            agree(params).then(res => {
                this.$message({
                    type: 'success',
                    message: '审批通过成功'
                })
                this.dialogVisible = false
                this.getTableData(this.currentPage, this.pageSize)
            })
        },
        noagree() {
            const params = {
                id: this.form.id,
                opinion: this.form.opinion,
                salary: this.form.salary,
                state: 3
            }
            noagree(params).then(res => {
                this.$message({
                    type: 'info',
                    message: '审批不通过成功'
                })
                this.dialogVisible = false
                this.getTableData(this.currentPage, this.pageSize)
            })
        },


        // 根据状态值返回对应的标签颜色
        getTagType(state) {
            switch (state) {
                case '0': // 人事审批
                    return 'info';  // 可以根据需求选择合适的颜色
                case '1': // 展会领导审批
                    return 'warning';
                case '2': // 通过
                    return 'success';
                case '3': // 未通过
                    return 'danger';
                default:
                    return '';
            }
        },
        // 根据状态值返回对应的文本
        getStateText(state) {
            switch (state) {
                case '0':
                    return '人事审批';
                case '1':
                    return '领导审批';
                case '2':
                    return '通过';
                case '3':
                    return '未通过';
                default:
                    return '';
            }
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getTableData(this.currentPage, val)
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getTableData(val, this.pageSize)
        },
        getTableData(page, size) {
            const params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize
            }
            getEmployeeStateList(params).then(res => {
                console.log('getEmployeeStateList', res)
                this.tableData = res.data.dataList
                this.total = res.data.total
            })
        },
    },
    created() {
        this.getTableData(this.currentPage, this.pageSize)
    }
}
</script>

<style lang="less" scoped></style>